<template>
	<!-- 打印标签 -->
	<v-dialog v-model="labelModel.dialog" persistent max-width="1400px">
		<v-card>
			<v-card-title>{{labelModel.titleName}}</v-card-title>
			<v-card-text >
				<div class="dayinComment" v-if="taskPartCheckDataList.length>0">
					<div ref="print" id="printComment">
						<table class="tab">
							<tbody class="top-tbody">
								<tr>
									<td colspan="3" style="width:70px; font-weight:bold;text-align: center;">
										昆山同日工业自动化
									</td>
									
								</tr>
								<tr>
									<td>零件名称</td>
									<td style="width:70px; font-weight:bold;text-align: center;">
										{{taskPartCheckDataList[0].woutname}}
									</td>
									<td colspan="1" rowspan="2" style="width: 68px;height: 68px;">
										<img
											style="width: 71px;height: 71px;" :src="taskPartCheckDataList[0].qrcode" />
									</td>
								</tr>
								<tr>
									<td>项目号</td>
									<td style="width:70px;font-weight:bold;text-align: center;">
										{{taskPartCheckDataList[0].projectcode}}
									</td>
								</tr>
							<!-- 	<tr>
									<td>检验日期</td>
									<td colspan="2" style="width:70px;font-weight:bold;text-align: center;">
										{{taskPartCheckDataList[0].checkdate}}
									</td>
								</tr> -->
						<!-- 	<tr>
								<td>检验人员</td>
								<td colspan="2" style="width:70px;font-weight:bold;text-align: center;">
									{{taskPartCheckDataList[0].checkusername}}
								</td>
							</tr>
							<tr>
								<td>加工人</td>
								<td colspan="2" style="width:70px;font-weight:bold;text-align: center;">
									{{taskPartCheckDataList[0].projectresponsible}}
								</td>
							</tr> -->
							</tbody>
						</table>

					</div>
				</div>

			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<div class="no-print">
					<v-btn color="primary" text @click="printContext">打印</v-btn>
					<v-btn color="primary" text @click="cannel">关闭</v-btn>
				</div>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script>
	import print from 'print-js'
	export default {
		name: 'PrintLabel',
		props: {
			labelModel: {
				dialog: false,
				titleName: '',
				//零件终检验id
				taskpartcheckIds: []
			},
		},
		data: () => ({
			taskPartCheckDataList: []

		}),
		watch: {
			labelModel: {
				handler(newVal) {
					this.$emit('update:labelModel', newVal)
					this.loadLabel()
				},
				deep: true
			},
		},
		methods: {
			async loadLabel() {
				if (!this.labelModel.dialog) {
					return
				}

				var response = await this.$httpRequest({
					url: `MES/MESQaProductionCheck/PrintLabel`,
					method: 'post',
					data: this.labelModel.taskpartcheckIds
				})

				if (response.status == 1) { 
					this.taskPartCheckDataList = response.data
				}

			},
			printContext() {
				printJS({
					printable: 'printComment',
					type: 'html',
					targetStyles: ['*'],
					ignoreElements: ['no-print'],
				})
			},
			cannel() {
				this.labelModel.dialog = false
			},
		}
	}
</script>

<style scoped>
	.main {
		background: #aaf5aa;
	}

	.dayinComment {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		@media print {
			text-align: left;
			width: 100%;
			margin: auto;
			page-break-after: always;
			margin-top: 0px;
			font-family: "微软雅黑";
		}



		#printComment {
			text-align: center;

			.content {}

			.btn {}
		}
	}


	.tab {
		table-layout: fixed;
		width: 210px;

		border-left: 1px solid #000;
		border-top: 1px solid #000;
		padding: 0px;
		margin: 0px;
		border-spacing: 0px;

		.top-tbody {}

		.bottom-tbody {
			.column-1 {
				width: 50px;
			}

			.column-2 {
				width: 180px;
			}

			.column-3 {
				width: 160px;
			}

			.column-4 {
				width: 120px;
			}

			.column-5 {
				width: 150px;
			}

			.column-body-1 {}

			.column-body-2 {}

			.column-body-3 {}

			.column-body-4 {}

			.column-body-5 {}
		}

		.tr-head {
			height: 25px;
		}

		.tr-body {}

		.td-bold {
			font-weight: bold;
		}

		.td-center {
			text-align: center;
		}

		.td-left {
			text-align: left;
		}

		.td-body-color {
			color: black;
		}
	}

	.Result0 {}

	.Result1 {
		color: gray;
	}

	.tab td {
		overflow: hidden;
		text-overflow: ellipsis;
		border-bottom: 1px solid #000;
		border-right: 1px solid #000;
		padding: 0px;
		margin: 0px;
		border-spacing: 1px;
	}
</style>
